<template>
  <div style="page-break-before: always;color: #000000;">
    <p style="text-align: center;">{{title}}</p>
    <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #000000;flex-wrap: nowrap;">
      <p style="display: flex;justify-content: space-between;width: 100%;">{{schoolName}}<span v-html="'&nbsp;'+empInfo+'&nbsp;'"></span>{{dateRange}}</p>
    </div>
    <div v-for="item,index in content" :key="index">
      <div v-if="item.docClassId == 36">
        <div v-if="item.docItemDefId==180">
          <div style="text-align: center;" v-html="item.content!=''?item.content:item.val"></div>
        </div>
        <div v-else-if="item.docItemDefId==181"  style="text-align: center;margin-bottom: 10px;" >
          作者：
          <span v-html="item.content!=''?item.content:item.val"></span>
        </div>
        <div v-else>
          <p>{{item.name}}</p>
          <div style="min-height: 80px;text-indent:2em;" class="content" v-html="item.content!=''?item.content:item.val"></div>
        </div>
      </div>
      <div v-else>
        <p>{{item.name}}</p>
        <div style="min-height: 80px;text-indent:2em;" class="content" v-html="item.content!=''?item.content:item.val"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['previewData','tableBody','docClassId'],
    data() {
      return {
        dateRange: '',
        empInfo: '',
        schoolName: '',
        title: '',
        content: [],
        dict_title: {
        	'26': ['一、简述本项目的基本特点:','二、所带队伍目前情况分析:','三、本项目（组别）在全省的竞争态势:','四、本周期的主要目标:',
        				'五、本周期训练重心的分布:','六、本周期运动员文化学习的安排:','七、本周期运动队的常规管理:','八、需要学校（单位）解决的问题:'],
        	'27': ['一、运动员个体现状的基本分析:','二、全年训练的基本任务:','三、全年训练的基本目标:','四、全年训练周期划分和训练内容安排:',
        				'五、实施全年训练的主要措施:','六、年度参加比赛,大纲考核和定期检测的时间安排:','七、需要单位帮助解决的困难和问题:'],
        	'2': ['一、阶段训练计划的周期划分和内容安排:','二、准备期:','三、比赛期:','四、恢复期:'],
        	'28': ['一、冬训时间安排:','二、冬训的基本任务:','三、冬训的主要目标:','四、冬训的内容安排:','五、冬训期间的测验:'],
        	'29': ['一、所带队伍冬训任务完成情况:','二、重点运动员冬训指标完成情况:','三、冬训测验的结果与分析:','四、冬训目标、任务未能完成的原因与分析:','五、通过冬训发现的问题与解决办法:'],
        	'30': ['一、赛前训练时间安排:','二、训练总时数:','三、训练任务:','四、训练方法与手段:','五、有针对性的训练安排:','六、教学比赛、模拟赛、邀请赛等时间安排:'],
        	'31': ['一、比赛的规格与规模:','二、比赛的日期与地点:','三、参赛的目标与任务:','四、比赛形势的评估分析:','五、参赛重点运动员情况综合分析:','六、赛前信息收集与主要对手情况分析:',
        				'七、赛程中可能出现的问题与应对措施:','八、赛前的训练安排与心理调控:','九、兴奋剂预防措施:','十、随队参赛人员的职责分工:','十一、参赛流程(程序化参赛方案):'],
        	'32': ['一、全年比赛情况综述:','二、参赛预案的实施情况:','三、重点运动员（重点场次）比赛情况:','四、主要对手发挥情况:','五、发现问题与解决措施:'],
        	'42': ['一、比赛情况综述:','二、参赛预案的实施情况:','三、重点运动员（重点场次）比赛情况:','四、主要对手发挥情况:','五、发现问题与解决措施:'],
        	'36': ['题目','作者','内容提要:','正文:','参考文献:'],
        	'35': ['一、本年度训练任务完成情况:','二、执行训练常规管理情况:','三、运动员文化教育:','四、本年度训练参赛的经验总结:','五、本年度训练参赛工作存在问题及改进措施:'],
          '38': ['一、队伍基本情况与分析','二、年度工作目标','三、训练常规管理的主要任务','四、教育教学与体教结合','五、训练保障措施'],
          '39': ['一、本年度训练任务完成情况',,'二、训练常规管理执行情况','三、教育教学与体教结合','四、训练保障措施的落实','五、本年度训练工作情况的综合分析'],
          '40': [],
          '41': [],
          '45': [],
          '46': [],
          '47': [],
          '48': [],
          '49': [],
          '50': [],
          '51': [],
          '52': [],
          '53': [],
          '54': [],
          '55': [],
        }
      }
    },
    created() {
      this.getContent()
    },
    watch: {
      previewData(val) {
        this.getContent()
      }
    },
    methods: {
      getContent() {
        for(let key in this.previewData){
          if(key == 'dateRange'){
            this.dateRange = this.previewData[key][0].content
          }else if(key == 'empInfo'){
            this.empInfo = this.previewData[key][0].content
          }else if(key == 'schoolName') {
            this.schoolName = this.previewData[key][0].content
          }else{
            this.title = key
            this.content = this.previewData[key]
          }
        }
        if(this.tableBody){
          this.content.forEach(item=>{
            item.content = this.reg_replace(item.content)
            this.tableBody.forEach(item2=>{
              if(item.docItemDefId == item2.docDefId){
                item.name = item2.name
              }
            })
          })
        }else{
          let arr = this.dict_title[this.docClassId]
          this.content.forEach((item,index)=>{
            item.content = this.reg_replace(item.content)
            item.name = arr[index]
          })
        }
      },
      reg_replace(content) {
        content = content.replace(new RegExp("&nbsp;", "gm"), "");
        content = content.replace(new RegExp("<h1", "gm"), "<p");
        content = content.replace(new RegExp("<h2", "gm"), "<p");
        content = content.replace(new RegExp("<h3", "gm"), "<p");
        content = content.replace(new RegExp("<h4", "gm"), "<p");
        content = content.replace(new RegExp("<h5", "gm"), "<p");
        content = content.replace(new RegExp("<h6", "gm"), "<p");
        content = content.replace(new RegExp("<h7", "gm"), "<p");
        content = content.replace(new RegExp("<strong", "gm"), "<span");
        content = content.replace(new RegExp("<b ", "gm"), "<span ");
        content = content.replace(new RegExp("font-size", "gm"), "");
        content = content.replace(new RegExp("font-weight", "gm"), "");
        content = content.replace(new RegExp("font-weight", "gm"), "");
        content = content.replace(new RegExp('width="106%"', "gm"), '');
        content = content.replace(new RegExp('background-color', "gm"), '');
        content = content.replace(new RegExp('<table', "gm"), '<table border="1" width="100%" style="border-collapse: collapse;"');
        return content
      },
    }
  }
</script>

<style lang="scss">
  .center{
    text-align: center;
  }
  .content{
    p{
      margin: 0;
    }
  }
</style>
